<template>
    <div class="content" v-loading="load">
        <el-form label-width="70">
            <el-form-item class="imgBox" label="类型图片">
                <el-upload :http-request="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :show-file-list="false"
                    class="avatar-uploader">
                    <el-icon v-if="type.image == ''" style="color: gainsboro;font-size: 45px;">
                        <Plus />
                    </el-icon>
                    <img :src="type!.image" alt="" v-else>
                </el-upload>
            </el-form-item>
            <el-form-item label="类型">
                <el-input type="text" v-model="type.type"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save()">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">

import { reqAddSeatType, reqUpdateSeatType } from '@/api/common';
import { SeatType } from '@/types/seat';
import { tip } from '@/utils/alert';
import { getBase64 } from '@/utils/commonUse';
import { UploadProps } from 'element-plus';
import Cloud  from 'leancloud-storage';
import { onMounted, ref, watch } from 'vue';

const load=ref<boolean>(false)

const emits=defineEmits(['emitAdd',"emitChange"])

const type=ref<SeatType>({
    type:"",
    image:''
})
const temp={...type.value}
const prop=defineProps<{
    typeOne:SeatType|null
}>()

watch(()=>prop.typeOne,()=>{
    if(prop.typeOne){
        type.value={...prop.typeOne}
    }else{
        type.value=temp
    }
})

const imgFormat = (base64: any) => {
    let cloudFile = new Cloud.File("banner.png", { base64 });
    return cloudFile.save()
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    const imgType = ['image/jpeg', 'image/png']
    if (imgType.indexOf(rawFile.type) == -1) {
        tip('图片格式为jpg', 'warning')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        tip('图片大小应为2MB', 'warning')
        return false
    }
    return true
}

const handleAvatarSuccess = (info: { file: any; }) => {
    getBase64(info.file, (base64: any) => {
       type.value.image = base64
    })
}

const save=async()=>{
    load.value=true
    if (type.value.image != prop.typeOne?.image) {
        let res: any = await imgFormat(type.value.image)
        type.value.image = res.attributes.url;
    }
    console.log(type.value);
    if(prop.typeOne){
        reqUpdateSeatType(type.value).then(res=>{
            tip(res.data.info,'success')  
            load.value=false
            emits("emitChange",{info:res.data.data,bool:false})
        })
        
    }else{
        reqAddSeatType(type.value).then(res=>{
            tip(res.data.info,'success')  
            load.value=false
            emits("emitAdd",false)
        })
    }
}



</script>

<style lang="scss" scoped>
.content {
    width: 50%;

    .el-button {
        width: 100%;
    }

    .imgBox {
        .avatar-uploader {
            height: 100px;
            width: 100px;
            border: 1px dashed var(--el-border-color);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 200px;
                height: 250px
            }
        }
    }
}</style>